
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<style>
#klem1,#klem2
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
#klem1:hover,#klem2:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
div.background
  {
  width: 500px;
  height: 250px;
  background: url(https://www.runoob.com/images/klematis.jpg) repeat;
  border: 2px solid black;
  }
div.transbox
  {
  width: 400px;
  height: 180px;
  margin: 30px 50px;
  background-color: #ffffff;
  border: 1px solid black;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
  }
div.transbox p
  {
  margin: 30px 40px;
  font-weight: bold;
  color: #000000;
  }
</style>
<h1>CSS 图像<span class="color_h1">透明/不透明</span>
</h1>
<hr/>
<p class="intro">使用CSS很容易创建透明的图像。</p>
<p class="intro"><b>注意：</b>CSS Opacity属性是W3C的CSS3建议的一部分。</p>
<hr/>
<div class="tryit_ex">
<img alt="Examples" decoding="async" height="46px" src="/images/tryitimg.gif" width="40"/><h2>更多实例</h2>
</div>
<p><a  rel="noopener noreferrer" target="_blank">
创建透明图像 - 悬停效果</a></p>
<p><a  rel="noopener noreferrer" target="_blank">创建一个具有文本的拥有背景图像的透明框</a></p>
<hr/>
<h2>实例1 - 创建一个透明图像</h2>
<p>CSS3中属性的透明度是 <b>opacity</b>。</p>
<p>首先，我们将向您展示如何用CSS创建一个透明图像。</p>
<p>正常的图像</p>
<img alt="klematis" decoding="async" height="113" src="/images/klematis.jpg" width="150"/><p>相同的图像带有透明度：</p>
<img alt="klematis" decoding="async" height="113" src="/images/klematis.jpg" width="150"/><p>看看下面的CSS：</p>
<div class="example">
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">img</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">opacity:</span><span class="hl-number">0.4</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">filter:</span><span class="hl-code">alpha</span><span class="hl-code">(</span><span class="hl-code">opacity</span><span class="hl-code">=</span><span class="hl-number">40</span><span class="hl-code">)</span><span class="hl-reserved"></span><span class="hl-code">; </span><span class="hl-comment">/*</span><span class="hl-comment"> IE8 及其更早版本 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-brackets">}</span></div>
</div></div>
<p>IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。</p>
<p>IE8和早期版本使用滤镜：alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。</p>
<hr/>
<h2>实例2 - 图像的透明度 - 悬停效果</h2>
<p>将鼠标移到图像上：</p>
<img alt="klematis" decoding="async" height="113" id="klem1" src="/images/klematis.jpg" width="150"/><img alt="klematis" decoding="async" height="113" id="klem2" src="/images/klematis2.jpg" width="150"/><p>CSS样式：</p>
<div class="example">
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">img</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">opacity:</span><span class="hl-number">0.4</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">filter:</span><span class="hl-code">alpha</span><span class="hl-code">(</span><span class="hl-code">opacity</span><span class="hl-code">=</span><span class="hl-number">40</span><span class="hl-code">)</span><span class="hl-reserved"></span><span class="hl-code">; </span><span class="hl-comment">/*</span><span class="hl-comment">  IE8 及其更早版本 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-identifier">img</span><span class="hl-special">:hover</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">opacity:</span><span class="hl-number">1.0</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">filter:</span><span class="hl-code">alpha</span><span class="hl-code">(</span><span class="hl-code">opacity</span><span class="hl-code">=</span><span class="hl-number">100</span><span class="hl-code">)</span><span class="hl-reserved"></span><span class="hl-code">; </span><span class="hl-comment">/*</span><span class="hl-comment"> IE8 及其更早版本 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-brackets">}</span></div>
</div></div>
<p>第一个CSS块是和例1中的代码类似。此外，我们还增加了当用户将鼠标悬停在其中一个图像上时发生什么。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图片是清晰的。</p>
<p>此CSS是：<b>opacity=1</b>.</p>
<p>IE8和更早版本使用： <b>filter:alpha(opacity=100)</b>.</p>
<p>当鼠标指针远离图像时，图像将重新具有透明度。</p>
<hr/>
<h2>实例3 - 透明的盒子中的文字</h2>
<div class="background">
<div class="transbox">
<p>这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。
</p>
</div>
</div>
<p>源代码如下：</p>
<div class="example">
<div class="example_code">
<div class="hl-main"><span class="hl-brackets">&lt;</span><span class="hl-code">!</span><span class="hl-var">DOCTYPE</span><span class="hl-code"> </span><span class="hl-var">html</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">html</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">head</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">meta</span><span class="hl-code"> </span><span class="hl-var">charset</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">utf-8</span><span class="hl-quotes">"</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">style</span><span class="hl-brackets">&gt;</span></div><div class="hl-main"><span class="hl-identifier">div</span><span class="hl-identifier">.background</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">width:</span><span class="hl-number">500</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">height:</span><span class="hl-number">250</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">background:</span><span class="hl-code">url</span><span class="hl-code">(</span><span class="hl-code">https</span><span class="hl-code">://</span><span class="hl-code">www</span><span class="hl-code">.</span><span class="hl-code">runoob</span><span class="hl-code">.</span><span class="hl-code">com</span><span class="hl-code">/</span><span class="hl-code">images</span><span class="hl-code">/</span><span class="hl-code">klematis</span><span class="hl-code">.</span><span class="hl-code">jpg</span><span class="hl-code">) </span><span class="hl-string">repeat</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">border:</span><span class="hl-number">2</span><span class="hl-string">px</span><span class="hl-code"> </span><span class="hl-string">solid</span><span class="hl-code"> </span><span class="hl-var">black</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-identifier">div</span><span class="hl-identifier">.transbox</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">width:</span><span class="hl-number">400</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">height:</span><span class="hl-number">180</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">margin:</span><span class="hl-number">30</span><span class="hl-string">px</span><span class="hl-code"> </span><span class="hl-number">50</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">background-color:</span><span class="hl-var">#ffffff</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">border:</span><span class="hl-number">1</span><span class="hl-string">px</span><span class="hl-code"> </span><span class="hl-string">solid</span><span class="hl-code"> </span><span class="hl-var">black</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">opacity:</span><span class="hl-number">0.6</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">filter:</span><span class="hl-code">alpha</span><span class="hl-code">(</span><span class="hl-code">opacity</span><span class="hl-code">=</span><span class="hl-number">60</span><span class="hl-code">)</span><span class="hl-reserved"></span><span class="hl-code">; </span><span class="hl-comment">/*</span><span class="hl-comment"> IE8 及更早版本 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-identifier">div</span><span class="hl-identifier">.transbox</span><span class="hl-code"> </span><span class="hl-identifier">p</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">margin:</span><span class="hl-number">30</span><span class="hl-string">px</span><span class="hl-code"> </span><span class="hl-number">40</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">font-weight:</span><span class="hl-string">bold</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">color:</span><span class="hl-var">#000000</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div><div class="hl-main"><span class="hl-brackets">&lt;/</span><span class="hl-reserved">style</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">head</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">body</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">class</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">background</span><span class="hl-quotes">"</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">class</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">transbox</span><span class="hl-quotes">"</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">p</span><span class="hl-brackets">&gt;</span><span class="hl-code">这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">p</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">div</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">div</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">body</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">html</span><span class="hl-brackets">&gt;</span></div>
</div></div>
<p>首先，我们创建一个固定的高度和宽度的div元素，带有一个背景图片和边框。然后我们在第一个div内部创建一个较小的div元素。 这个div也有一个固定的宽度，背景颜色，边框 - 而且它是透明的。透明的div里面，我们在P元素内部添加一些文本。</p> <div class="scroll-top"><a >返回顶部</a></div>
</div>

    </body>
    </html>
    